<template>
	<view class="pb50">
		<uni-card spacing="0" margin="0" :is-shadow="false" :border="false">
			<uni-forms ref="formRef" :model="formData" :rules="formRules" class="p10 forms-dom" :label-width="80">
				<uni-forms-item label="活动名称"  required>
					<view style="line-height: 36px; padding-left: 10px;">{{formData.eventName}}</view>
				</uni-forms-item>
				<uni-forms-item label="活动时间"  required>
					<view style="line-height: 36px;">{{formData.eventDate}}</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone" required>
					<uni-easyinput v-model="formData.phone"  placeholder="请输入联系电话" trim />
				</uni-forms-item>
				<uni-forms-item label="联系邮箱" name="email">
					<uni-easyinput v-model="formData.email"  placeholder="请输入联系邮箱" trim />
				</uni-forms-item>
			</uni-forms>
		</uni-card>
	</view>
	<view class="sticky-b10 p10">
		<button @click="submit" type="default" class="basicbutton m10" hover-class="basicbutton-hover">活动报名</button>
	</view>

</template>

<script lang="ts" setup>
	import { getUser } from "@/utils/storage"
	import { activityAdd } from "@/api/activity"
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const formData = ref({
		eventId: '',
		eventName: '',
		eventDate: '',
		phone: '',
		email: '',
		name: '',
		studentId: ''
	})
	const formRules = ref({
		phone: {
			rules: [{
				required: true,
				errorMessage: '联系电话不能为空'
			},{
				pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
				errorMessage: '联系电话 格式错误',
			}],
		},
		email: {
			rules: [{
				pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				errorMessage: '联系邮箱 格式错误',
			}],
		}
	})
	onLoad((option) => {
		let userData = getUser()
		formData.value.eventId = option.itemID
		formData.value.eventName = option.eventName
		formData.value.eventDate = option.eventDate
		formData.value.phone = userData.phonenumber
		formData.value.name = userData.name
		formData.value.studentId = userData.userId
	});
	let formRef = ref(null)
	function submit() {
		formRef.value.validate().then(res => {
			addOk()
		}).catch(err => {
			uni.showToast({ icon: "none", title: err[0].errorMessage })
		})
	}
	
	function addOk(){
		activityAdd({...formData.value}).then(res => {
			if (res.code == '200') {
				uni.showModal({
					title: "报名成功",
					content: "报名成功，可以在：我的->我的活动中查询！",
					showCancel: false,
					success: () => {
						uni.navigateBack()
					},
				})
			}
		})
	}
	
</script>

<style lang="scss" scoped>
	.forms-dom {
		background: #fff;
	}

	.sticky-b10 {
		position: sticky;
		bottom: 0rpx;
		background: #f5f5f5;
	}
</style>